<template>
    <control title="悬浮按钮">
        <template #content>
            <el-form ref="form" :model="content" label-width="90px" size="mini" label-position="left">
                    <div class="select-cover">
                        <div class="select-cover__content">
                            <div class="select-cover__item">
                                <pictureSelect v-model="content.url" :limit="1">
                                    <template #upload>
                                        <div class="select-cover__item-add">
                                            <i class="le-icon le-icon-add"></i>
                                            <span class="select-cover__item-text">添加图片</span>
                                        </div>
                                    </template>
                                    <template #preview="preview" >
                                        <div  class="select-cover__item-edit">
                                            <el-image :src="preview.url" fit="cover"></el-image>
                                            <div class="select-cover__item-tips">
                                                替换图片
                                            </div>
                                        </div>
                                    </template>
                                </pictureSelect>
                            </div>
                            <div class="select-cover__detail">
                                <el-form-item label="标题" label-width="40px">
                                    <el-input type="text"   placeholder="请输入标题" v-model="content.title" maxlength="10">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="链接" label-width="40px">
                                    <hyperlinkSelect v-model="content.link">请选择跳转链接</hyperlinkSelect>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
        </el-form>

        </template>
        <template #style>
            <el-form ref="form" :model="facade" label-width="90px" size="mini" label-position="left">
                <el-form-item label="X轴（百分比）">
                  <slider v-model="facade.x" :min="0" :max="80"></slider>
                </el-form-item>
                <el-form-item label="Y轴（百分比）">
                  <slider v-model="facade.y" :min="0" :max="90"></slider>
                </el-form-item>
              </el-form>
        </template>

    </control>
</template>
<script type="text/javascript">
import control from '/$/magic/components/control.vue'
import colour from '/$/magic/components/colour.vue'
import slider from '/$/magic/components/slider.vue'
import pictureSelect from '/$/magic/components/pictureSelect/index.vue'

import hyperlinkSelect from '/$/magic/components/hyperlinkSelect/select.vue'
export default {
    components: {
        control,
        colour,
        slider,
        pictureSelect,
        hyperlinkSelect
    },
    data() {
        return {

        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        content: {
            get() {
                return this.$store.getters.content;
            },
            set(value) {
                let data = {
                    key: "content",
                    value: value
                }
                this.$store.commit('setAttribute', data)
            }
        },
        facade: {
            get() {
                return this.$store.getters.facade;
            },
            set(value) {
                let data = {
                    key: "facade",
                    value: value
                }
                this.$store.commit('setAttribute', data)
            }
        }

    },
    /**
     * 页面渲染前
     * @return {[type]} [description]
     */
    created() {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

    }
};
</script>
<style lang="less" scoped>
@import '../attribute.less';
</style>